<template>
	<view class="index">
		<view class="search-header">
			<view class="search-wrap">
				<navigator url="../../components/zy-search/zy-search">
					<input class="search-input" placeholder="大家都在搜'虾青素的作用'" confirm-type="search" />
				</navigator>
			</view>

			<cover-view class="cover-img">
				<cover-image class="search-img" mode="aspectFill" src="../../static/images/search.png"></cover-image>
			</cover-view>
			<view class="title">
				<view class="tab">
					<view class="tab-list">
						<view class="tab-title-item1" @click="current = 0">推荐</view>
						<view class="tab-title-item2" @click="current = 1">时尚</view>
						<view class="tab-title-item3" @click="current = 2">美妆</view>
						<view class="tab-title-item4" @click="current = 3">美食</view>
						<view class="tab-title-item5" @click="current = 4">运动</view>
					</view>
				</view>
			</view>

		</view>

		<view class="content">

			<waterfallsFlow :list="list">
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
					<view class="cnt">
						<view class="title">{{ item.title }}</view>
						<view class="text">{{ item.text }}</view>
						<view class="bottom">
							<view class="bottom-img">
								<image :src="item.image1_url" mode="aspectFill"></image>
							</view>
							<view class="bottom-msg">{{ item.msg }}</view>
							<view class="bottom-icon" @click="addNum(item.id)">
								<image :src="item.icon_url" mode="aspectFill" ></image>
							</view>
							<view class="bottom-num">{{ item.number }}</view>
						</view>

					</view>


				</view>
				<!--  #endif -->

				<!-- #ifndef  MP-WEIXIN -->
				<view v-slot:default="item">
					<view class="cnt">
						<view class="title">{{ item.title }}</view>
						<view class="text">{{ item.text }}</view>

					</view>
				</view>
				<!-- #endif -->
			</waterfallsFlow>

		</view>

	</view>


</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import search from "@/components/zy-search/zy-search.vue";
	let list = [{
			id: 1,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475741266&di=e36d6c01c93320e2ba1504d8357248f4&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg",
			title: "可爱的小猫咪呀",
			type: 0,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
			msg: "柴犬犬",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "12",
			text: "小小的猫咪，甚是呆萌，呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌",
		},
		{
			id: 2,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475934834&di=7a37b8d628252c4aced6ed0decba9442&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F43%2F74%2F01300000164151121808741085971.jpg",
			title: "迪士尼动画",
			type: 1,
			image1_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3617442206,1150108905&fm=26&gp=0.jpg",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "12",
			text: "迪士尼动画之……",
		},
		{
			id: 3,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476083909&di=a5debff35edec5de105bc105d6fdbce3&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F77%2F77%2F01300000336597125202779973172.jpg",
			title: "火箭",
			type: 0,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580766183&di=6ffc9e01b891e77a991b311f477d2e76&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F02%2F20170802072206_v5FEN.jpeg",
			msg: "圣诞猫",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "49",
			text: "火箭升空瞬间，宏伟壮观啊",
		},
		{
			id: 5,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476129760&di=7a3db0b14f6a74240bbfa7922ba22f45&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F82%2F55%2F01300000349330124003555691086.jpg",
			title: "华佗",
			type: 4,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580831046&di=91e37c2600a86e4e5f3a082464e6a031&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F30%2F20150530141552_xZKFz.thumb.700_0.jpeg",
			msg: "柴小猪",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "430",
			text: "华佗人物画像 中国画 线条画 毛笔画 彩色画",
		},
		{
			id: 6,
			image_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2622933625,920552892&fm=26&gp=0.jpg",
			title: "恐龙",
			type: 0,
			image1_url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3064153946,1819584304&fm=11&gp=0.jpg",
			msg: "hhh",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "987",
			text: "恐龙来啦",
		},
		{
			id: 7,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607931270948&di=e989c68f5c98aa9308bc14e12b1c1c3b&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F03%2F20200203132734_stwSm.thumb.400_0.jpeg",
			title: "手",
			type: 0,
			image1_url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3508878793,1833881897&fm=11&gp=0.jpg",
			msg: "宝可梦",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "359",
			text: "什么？",
		},
		{
			id: 8,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476300222&di=49712f992d8f7bbb1a5851eced71cbe2&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F71%2F56%2F16300000988660128426569668958.jpg",
			title: "百年好合",
			type: 2,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
			msg: "柴犬犬",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "3339",
			text: "百年好合 结婚 庚帖 二次元",
		},
		{
			id: 9,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476416001&di=ea1a1f8f9b1274d39c05af3e48041e6a&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12420002963%2F641",
			title: "5G",
			type: 2,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
			msg: "柴犬犬",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "4777",
			text: "5G 来啦",
		},
		{
			id: 10,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476497015&di=2dfa9a6ec465d7330bc0b4433d63cd9e&imgtype=0&src=http%3A%2F%2Fimgo.zjjjtg.com%2Fimg2020%2F9%2F4%2F10%2F2020090410315179234.jpg",
			title: "LEVEL 2",
			type: 3,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
			msg: "柴犬犬",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "678",
			text: "LEVEL 2",
		},
		{
			id: 12,
			image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476567983&di=040976a1cd1a6e5510a237c57bdcff06&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12421051168%2F641",
			title: "王者荣耀",
			type: 3,
			image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
			msg: "柴犬犬",
			icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
			number: "12",
			text: "王者荣耀 龙 快来打龙 请求集合",
		},
	]
	export default {
		name: "index",
		components: {
			waterfallsFlow
		},
		data() {
			return {
				current: 0
			};
		},
		computed: {
			list: function() {
				let that = this;
				let myList = list.filter((item) => {
					return item.type === that.current
				})
				return myList
			}
		},
		methods: {
			addNum(id) {
				let list = this.list
				for (let l of list) {
					if (l.id === id) {
						l.number++;
						this.$forceUpdate() // 强制更新
						break;
					}
				}
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.search-header {
		position: relative;
		height: 70px;
	}

	.search-wrap {
		position: absolute;
		top: 10px;
		bottom: 20px;
		left: 50%;
		width: 700rpx;
		height: 70rpx;
		background: #F8F8F8;
		margin-left: -350rpx;
		border-radius: 8px;
	}

	.search-input {
		width: 700rpx;
		height: 70rpx;
		padding-left: 60rpx;
		font-size: 14px;
	}

	.cover-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 30rpx;
	}

	.search-img {
		width: 34rpx;
		height: 34rpx;
	}

	.content {
		padding: 10px;

		.cnt {
			padding: 10px;

			.title {
				font-size: 16px;
			}

			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}

	.tab {
		position: relative;
	}

	.tab-list {
		position: absolute;
		top: 40px;
		width: 100%;
		padding-top: 10px;
		display: flex;
		background: #eee;
		font-size: 14px;
	}

	.tab-title-item1,
	.tab-title-item2,
	.tab-title-item3,
	.tab-title-item4,
	.tab-title-item5 {
		padding-left: 50px;
		color: #FF6138;
	}

	.bottom {
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		margin-top: 10px;
	}


	.bottom-img image {
		width: 30px;
		height: 30px;
		border-radius: 40px;
	}

	.bottom-icon image {
		width: 20px;
		height: 20px;
		padding-left: 50px;
		padding-right: 10px;
	}
</style>
